<!-- 在这个文件对每个tab对应的列表进行渲染 -->
<template>
		
		<view class="paryorder-content">
			<!-- 这里设置了z-paging加载时禁止自动调用reload方法，自行控制何时reload（懒加载）-->
			<!--  :enable-back-to-top="currentIndex===tabIndex" 在微信小程序上可以多加这一句，因为默认是允许点击返回顶部的，但是这个页面有多个scroll-view，会全部返回顶部，所以需要控制是当前index才允许点击返回顶部 -->
			<z-paging ref="paging" v-model="dataList" @query="queryList" :fixed="false" :auto="false" :show-default-loading-more-text="false"	>
				<!-- 如果希望其他view跟着页面滚动，可以放在z-paging标签内 -->
				<template #top>
						<view class=""  >
							<u-navbar :border-bottom="false" :background="{background:'#F8F8F8'}" title="浏览记录" :title-size="36" :title-bold="true" :title-color="textColor" >
								<template #right>
									<view class="u-p-r-30"  >
										<text v-if="isCheckShow" @click="editBeginFn">管理</text>
										<view class="u-flex" v-if="!isCheckShow" @click="editEndFn" style="border: 1px solid #FFBB1A;color: #FFBB1A; padding: 4rpx 18rpx; border-radius: 20rpx;">
											管理
											<u-icon name="close" size="10" color="#FFBB1A" style="margin-left: 10rpx;"></u-icon>
										</view>
									</view>	
								</template>
								
							</u-navbar>
						</view>
				</template>
				
				<view class="history-container">
					<u-checkbox-group  :wrap="true" :size="40" :icon-size="20" :label-disabled="true" shape="circle" :active-color="themeColor">
						<u-checkbox 
							:noneClass="isCheckShow"
							:labelClass="true"
							@change="checkboxChange" 
							v-model="item.checked" 
							v-for="(item, index) in dataList" :key="item.id" 
							:name="index"
							style="width: 100%;"
						>
								<view class="history-item u-p-20 u-m-b-20 u-flex" @click="$mRouter.push({ route: '/pages/index/xiangqing?id=' + item.itemId  + '&sellerShopId=' + item.sellerId  })" :style="{'marginLeft':isCheckShow?'0':'20rpx'}">
									<!-- <image :src="item.itemResourceUrl" mode="" style="width: 144rpx;height: 144rpx;margin-right: 20rpx;"></image> -->
									<image :src="item.itemResourceUrl" mode="" style="display:block;width: 144rpx;height: 144rpx;margin-right: 20rpx;"></image>
									<view class="" style="flex: 1;">
										<view class="u-font-30" style="font-weight: 500;">{{item.name}}</view>
										<view class="u-font-24" style="color: #999;">{{item.sellerName}}</view>
										<view class="">
											{{$fui.dateFormatter(item.visitedTime, 'y-m-d')}}
										</view>
									</view>
								</view>
						</u-checkbox>
					</u-checkbox-group>
				</view>
				<template #bottom>
						<view >
							<view v-if="!isCheckShow">
								<!-- bottom的内容 -->
								<view class="history-bottom u-p-r-35 u-p-l-35 u-flex u-col-center u-row-between">
									<u-checkbox class="u-flex" :icon-size="20" :size="40" :name="'全选'" v-model="allSelect" shape="circle" label-size="24rpx" :active-color="themeColor" @change="checkedAll">
										<text style="font-weight: bolder;">全选</text>
									</u-checkbox>
									<button type="default" class="history-del_btn" @click="delHistoryFn">删除</button>
								</view>
							</view>
						</view>
				</template>
				
			</z-paging>
			
		</view>
	
</template>

<script>
	
	export default {
		data() {
			return {
				//v-model绑定的这个变量不要在分页请求结束中自己赋值！！！
				dataList: [],
				firstLoaded: false,
				paymentStatus:['待付款','待到账','已完成','部分完成','支付失败','已关闭','退款中','已退款',],
				isCheckShow:true,
				allSelect:false,
				timer:null,
			}
		},
		props:{
			//当前组件的index，也就是当前组件是swiper中的第几个
			tabIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},
			//当前swiper切换到第几个index
			currentIndex: {
				type: Number,
				default: function(){
					return 0
				}
			},

		},
		watch: {
			currentIndex: {
				handler(newVal) {
					if(newVal === this.tabIndex){
						//懒加载，当滑动到当前的item时，才去加载
						if(!this.firstLoaded){
							setTimeout(() => {
								this.$refs.paging.reload();
							}, 100);
						}
					}
				},
				immediate: true
			},
		},
		methods: {
			// 选中某个复选框时，由checkbox时触发
			checkboxChange(e) {
				this.dataList[e.name].checked = e.value;
				this.allSelect = this.dataList.every(item=>{return item.checked === true});
			},
			// 点击管理按钮开始编辑
			editBeginFn(){
				this.isCheckShow = false;
			},
			// 结束编辑
			editEndFn(){
				this.isCheckShow = true;
				this.allSelect = false;
				this.checkedAll({value:this.allSelect});
			},
			// 全选
			checkedAll(e) {
				this.dataList.map(val => {
					val.checked = e.value;
				});
			},
			async delHistoryFn(){
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				let ary = [];
				this.dataList.forEach(item=>{
					if(item.checked){
						ary.push(item.id);
					}
				});
				if(ary.length == 0){
					uni.hideLoading({});
					this.$u.toast('至少选择一条记录');
					return false;
				}
				const res = await this.$newHttp.delete('api/Product/DeleteSelfBrowsingHistories'+'?'+this.$mHelper.stringify({id:ary}));
				console.log(this.$mHelper.stringify({id:ary}));
				uni.hideLoading({});
				if(res.code == 200){
					this.$refs.paging.reload();
				}else{
					this.$u.toast('删除失败，错误信息：'+res.erroMessage);
				}
				
			},
			async queryList(pageNo, pageSize) {
				//组件加载时会自动触发此方法，因此默认页面加载时会自动触发，无需手动调用
				//这里的pageNo和pageSize会自动计算好，直接传给服务器即可
				//模拟请求服务器获取分页数据，请替换成自己的网络请求
				const params = {
					pageIndex: pageNo,
					pageSize: pageSize,
				}
					
				if(this.currentIndex != 0){
					params.Status = this.currentIndex-1
				}
				uni.showLoading({
					title: 'loading...',
					mask: false
				});
				const res = await this.$newHttp.get('api/Product/GetItemsBrowsingHistoriesByPage', { params: params } );
				uni.hideLoading({})
				if(res.code === 200){
					let ary = res.data.list.map(item=>{
						item.checked = this.allSelect;
						return item
					});
					this.$refs.paging.complete(ary);
					this.firstLoaded = true;
				}else{
					this.$refs.paging.complete(false);
				}
			},
			itemClick(item) {
				if(item.paymentStatus != 5){
					this.$mRouter.push({
						route: '/pages/purchase/payorder/payOrderDetails?id='+item.id,
					})
				}else{
					this.$u.toast('该付款单已关闭')
				}
				
			}
		}
	}
</script>

<style lang="scss" scoped>
	/* 注意:父节点需要固定高度，z-paging的height:100%才会生效 */
	.paryorder-content {
		height: 100%;
		
	}
	::v-deep{
		.u-checkbox__label{
			flex:1;
		}
	}
	.history-container{
		box-sizing: border-box;
		padding: 35rpx;
		.history-item{
			width: 100%;
			background-color: #fff;
			border-radius: 10rpx;
		}
		
	}
	.history-bottom{
		width: 100%;
		height: 138rpx;
		background-color: #fff;
		.history-del_btn{
			width: 200rpx;
			height: 80rpx;
			background: #F0B400;
			border-radius: 40rpx;
			font-size: 28rpx;
			line-height: 80rpx;
			margin: 0;
		}
	}
	
</style>
